<template>
  <div id="app" style="width: 100%; height: 100%">
    <svg style="width: 100%; height: 100%" :viewBox="`0 0 ${width} ${height}`">
      <a
        class="fontA"
        v-for="(tag, index) in tags"
        :key="`tag-${index}`"
        :style="{ fill: tag.color }"
      >
        <text
          :id="tag.id"
          :x="tag.x"
          :y="tag.y"
          :font-size="23 * (600 / (600 - tag.z))"
          :fill-opacity="(400 + tag.z) / 600"
          @mousemove="listenerMove"
          @mouseout="listenerOut"
          @click="clickToPage"
        >
          {{ tag.text }}
        </text>
      </a>
    </svg>
  </div>
</template>
  
<script setup>
import { ref, computed, onMounted, onUnmounted } from "vue";

const width = ref(600); // svg的视图宽度
const height = ref(600); // svg的视图高度
const tagsNum = ref(0); // 标签数量
const RADIUS = ref(450); // 球的半径
const speedX = ref(Math.PI / 360 / 1.0); // 球一帧绕x轴旋转的角度
const speedY = ref(Math.PI / 360 / 1.5); // 球一帧绕y轴旋转的角度
const tags = ref([]);
const colors = ref([
  "#eccc68", // 亮黄色
  "#ff7f50", // 珊瑚色
  "#ff6b81", // 粉色
  "#a4b0be", // 灰色
  "#ffa502", // 亮橙色
  "#ff6348", // 番茄红
  "#ff4757", // 亮红色
  "#7bed9f", // 亮绿色
  "#2ed573", // 亮绿色
  "#1e90ff", // 亮蓝色
  "#3742fa", // 亮蓝色
  "#fff200", // 亮黄色
  "#7d5fff", // 亮紫色
]); // 定义颜色数组
const data = ref([
  // 二氧化碳
  // "空气温度平均值",
  // "CO\u2082",
  // "30cm土壤含水量平均值",
  // "CH\u2084",
  // "30cm土壤温度平均值",
  // "5cm土壤含数量",
  // "温度",
  // "5cm土壤热通量平均值",
  // "风速",
  // "10cm土壤电导率",
  // "10CM土壤热通量平均值",
  // "光照",
  // "潜热通量",
  // "50cm土壤含水量平均值",
  // "大气压",
  // "30cm土壤电导率",
  // "上风向对足迹贡献最大位置",
  // "W方向平均风俗",
  // "水汽摩尔混合比标准差",
  // "空气相对湿度",
  // "平均的水汽摩尔混合比",
  // "空气水汽压",
  // "反照率",
  // "降雨量",
  // "U方向平均风速",
  // "平均风速",
  // "50cm土壤温度平均值",
  // "室外温度",
  // "平均超声温度",
  // "超声温度标准偏差",
  // "荧光",
  // "V方向平均风速",
    "空气温度",
    "空气湿度",
    "大气压强",
    "水汽压",
    "PM2.5",
    "PM10",
    "总悬浮微粒",
    "颗粒物传感器温度",
    "颗粒物传感器湿度",
    "二氧化碳",
    "平均风速",
    "平均矢量风向",
    "风向标准差",
    "物候照片",
    "YL-ES",
    "YL-WSD",
    "CAM-5",
    "AT-CO₂",
    "HMP110",

]);

const CX = computed(() => width.value / 5); // 球心x坐标
const CY = computed(() => height.value / 2); // 球心y坐标

function initData() {
  // 初始化标签位置
  tags.value = [];
  tagsNum.value = data.value.length;
  for (let i = 0; i < data.value.length; i++) {
    let tag = {};
    let k = -1 + (2 * (i + 1) - 1) / tagsNum.value;
    let a = Math.acos(k);
    let b = a * Math.sqrt(tagsNum.value * Math.PI); // 计算标签相对于球心的角度
    tag.text = data.value[i];
    tag.x = CX.value + RADIUS.value * Math.sin(a) * Math.cos(b); // 根据标签角度求出标签的x,y,z坐标
    tag.y = CY.value + RADIUS.value * Math.sin(a) * Math.sin(b);
    tag.z = RADIUS.value * Math.cos(a);
    tag.id = i; // 给标签添加id
    tag.color = colors.value[Math.floor(Math.random() * colors.value.length)]; // 随机分配颜色
    tags.value.push(tag);
  }
}

function rotateX(angleX) {
  var cos = Math.cos(angleX);
  var sin = Math.sin(angleX);
  for (let tag of tags.value) {
    var y1 = (tag.y - CY.value) * cos - tag.z * sin + CY.value;
    var z1 = tag.z * cos + (tag.y - CY.value) * sin;
    tag.y = y1;
    tag.z = z1;
  }
}

function rotateY(angleY) {
  var cos = Math.cos(angleY);
  var sin = Math.sin(angleY);
  for (let tag of tags.value) {
    var x1 = (tag.x - CX.value) * cos - tag.z * sin + CX.value;
    var z1 = tag.z * cos + (tag.x - CX.value) * sin;
    tag.x = x1;
    tag.z = z1;
  }
}

let timer = null;
function runTags() {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
  timer = setInterval(() => {
    rotateX(speedX.value);
    rotateY(speedY.value);
  }, 17);
}

function listenerMove(e) {
  if (e.target.id) {
    clearInterval(timer);
  }
}

function listenerOut(e) {
  if (e.target.id) {
    runTags();
  }
}

function clickToPage() {}

onMounted(() => {
  initData();
  runTags();
});

onUnmounted(() => {
  clearInterval(timer);
});
</script>
  
  <style scoped>
.fontA {
  fill: #60cae9;
  font-weight: bold;
}
.fontA:hover {
  fill: #ffffff;
  cursor: pointer;
}
</style>